<template>
  <div class="edit-div">
    <el-steps :space="400" :active="2" finish-status="success">
      <el-step title="实验信息"></el-step>
      <el-step title="实验配置"></el-step>
      <el-step title="实验详情"></el-step>
    </el-steps>
    <div class="demo-input-suffix">
      <span class="form-input-label">镜像类型：</span>
      <el-select v-model="data.experiment_type" @change="clearSelectedImage" placeholder="请选择">
        <el-option
            v-for="item in experiment_type_select"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
      </el-select>
    </div>
      <div>
        <div class="demo-input-suffix" v-if="data.experiment_type === 'single'">
          <span class="form-input-label">镜像名称：</span>
          <el-button @click="onShowChoiceImage" type="primary">选择镜像</el-button>
          <span v-if="primary_image">{{ primary_image.image_name }}</span>
          <span v-else></span>
        </div>
        <div class="demo-input-suffix" v-if="data.experiment_type === 'double'">
          <div class="demo-input-suffix">
            <span class="form-input-label">主镜像名称：</span>
          <el-button @click="onShowChoiceImage" type="primary">选择镜像</el-button>
          <span v-if="primary_image">{{ primary_image.image_name }}</span>
          <span v-else></span>
          </div>
          <div class="demo-input-suffix">
            <span class="form-input-label">靶机镜像名称：</span>
          <el-button @click="onShowChoiceImage2" type="primary">选择镜像</el-button>
          <span v-if="target_machine_image">{{ target_machine_image.image_name }}</span>
          <span v-else></span>
          </div>

        </div>
      </div>
<!--      <div style="margin-top: 50px;" class="demo-input-suffix">-->
<!--        <span class="form-input-label">镜像名称：</span>-->
<!--        <el-button @click="onShowChoiceImage" type="primary">选择镜像</el-button>-->
<!--        <span v-if="image">{{ image.image_name }}</span>-->
<!--      </div>-->
      <!--    <div class="demo-input-suffix">-->
      <!--      <span class="form-input-label">子网地址：</span>-->
      <!--      <el-select v-model="data.cidr_block" placeholder="请选择">-->
      <!--        <el-option-->
      <!--          v-for="item in subnets"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"-->
      <!--        ></el-option>-->
      <!--      </el-select>-->
      <!--    </div>-->
      <!--    <div class="demo-input-suffix">-->
      <!--      <span class="form-input-label">安全组：</span>-->
      <!--      <el-select v-model="data.security_group" placeholder="请选择">-->
      <!--        <el-option-->
      <!--          v-for="item in security_groups"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"-->
      <!--        ></el-option>-->
      <!--      </el-select>-->
      <!--    </div>-->
      <!--    <div class="demo-input-suffix">-->
      <!--      <span class="form-input-label">外网连接：</span>-->
      <!--      <el-select v-model="data.is_open" placeholder="请选择">-->
      <!--        <el-option-->
      <!--          v-for="item in is_open_status"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"-->
      <!--        ></el-option>-->
      <!--      </el-select>-->
      <!--    </div>-->
      <div style="margin-top: 50px;" class="submit-bar">
        <el-button @click="onSubmit" type="primary">下一步</el-button>
        <el-button @click="goPrev">上一步</el-button>
      </div>
      <choice-image :show="showChoiceImage" @onClose="hideChoiceImage" @onSubmit="onChoiceImage"/>
      <choice-image :show="showChoiceImage2" @onClose="hideChoiceImage2" @onSubmit="onChoiceImage2"/>
    </div>
</template>
<script>
import {envModel} from "@/api/models";
import {Message} from "element-ui";
import openStatus from '@/common/is_open_status.js';
import ChoiceImage from '../modals/choiceImage.vue';
import selects from '@/common/selects.js'
import experiment from "@/views/Experiment.vue";

export default {
  computed: {
    experiment() {
      return experiment
    }
  },
  mixins: [],
  components: {ChoiceImage},
  data() {
    return {
      primary_image: '',
      target_machine_image: '',
      experiment_type_select: [{label: "单镜像", value: "single"}, {label: "双镜像", value: "double"}],
      data: {
        environment_name: '',
        experiment_type: '',
        images: [],
        subnet_name: '',
        cidr_block: selects.subnets[0].value,
        is_open: openStatus.status[0].value,
        experiment_id: null,
        security_group: selects.security_group[1].value
      },
      showChoiceImage: false,
      showChoiceImage2: false,
      experiment_id: null,
      subnets: selects.subnets,
      security_groups: selects.security_group
    };
  },
  mounted() {
    this.experiment_id = this.$route.params.experiment_id
    this.getEnv()
  },
  methods: {
    getEnv() {
      envModel.getByExperiment(this.experiment_id, res => {
        if (res.data.length !== 0) {
          this.data = res.data
          this.primary_image = {image_name: res.data.images[0]}
          if (res.data.experiment_type==='double'){
            this.target_machine_image = {image_name: res.data.images[1]}
          }
        }
      })
    },
    onSubmit() {
      let d = this.data;
      if (!this.primary_image) {
        return Message.warning("请选择实验镜像");
      }
      if (!this.target_machine_image){
        d.images = [this.primary_image.id]
      }else {
        d.images = [this.primary_image.id,this.target_machine_image.id]
      }
      d.experiment_id = this.experiment_id
      let action = d.id ? envModel.update : envModel.create;
      action(d, res => {
        Message.success(res.message);
        this.$router.push('/edit/experiment/desc/' + this.experiment_id)
      })
    },
    goPrev() {
      this.$router.push('/edit/experiment/' + this.experiment_id)
    },
    onChoiceImage(c) {
      this.primary_image = c
      this.hideChoiceImage()
    },
    onChoiceImage2(c) {
      this.target_machine_image = c
      this.hideChoiceImage2()
    },
    hideChoiceImage() {
      this.showChoiceImage = false
    },
    onShowChoiceImage() {
      this.showChoiceImage = true
    },
    hideChoiceImage2() {
      this.showChoiceImage2 = false
    },
    onShowChoiceImage2() {
      this.showChoiceImage2 = true
    },
    clearSelectedImage() {
        // 清空选中的镜像
        this.primary_image = '';
        this.target_machine_image='';
    }

  }
};
</script>
<style lang="scss">
</style>